<template>
	<view>
		<view class="no_data" v-if="list.length===0">
			<image :src="imgUrl+'scan_no_bg.png'"></image>
			<view>
				暂无瓶码信息，前去扫码～
			</view>
		</view>
		<view class="scan" @tap="scan()">
			<image :src="imgUrl+'scan.png'"></image>
		</view>
		<view class="content">
			<view v-for="(item,ids) in list">
				<text>瓶码：{{item}}</text>
				
			</view>
		</view>
		<view class="btn" @tap="qure()">
			提交
		</view>
		<nkPicker  ref="nkPicker" :list='flowList' @chooseVal='chooseOrder'></nkPicker>
	</view>
</template>

<script>
	import {
		OREDR_STATUS
	} from '@/utils/global.js';
	import {
		mapStatus,
		mapMutations
	} from 'vuex'
	import {
		toast
	} from '@/utils/utils.js';
	import nkPicker from '@/components/nk-picker-list/nk-picker.vue';
	
	export default {
		components: {
			nkPicker
		},
		data() {
			return {
				imgUrl: this.$API.IMG_URL + '/liquefied-mall/common/',
				list:[],
				orderId:null,
				bottleCount:null,
				delta:1,
				tenantId:null,
				flowList:[]
			};
		},
		onLoad(params) {
			this.delta = params.delta || 1;
			this.orderId = params.id;
			this.tenantId = params.tenantId;
			this.bottleCount = params.bottleCount;
			uni.setNavigationBarColor({
				backgroundColor: '#f9ead5',
				frontColor: '#000000'
			});
		},
		methods:{
			...mapMutations(['setOrderStatus']),
			chooseOrder(index){
				console.log("index:",index)
				this.$API.liquefiedGasBottleConfirms({
					orderId: this.orderId,
					qrCodeList:this.list,
					flowLogId:this.flowList[index].id
				}).then(res => {
					if (res.code === 0) {
						this.setOrderStatus(OREDR_STATUS[2]);
						if(this.delta ==0){
							
							uni.navigateBack({
								delta:2
							})
						}else{
							uni.navigateBack();
						}
						
					}
				}).catch(() => {
				
				});
			},
			scan(){
				let  that = this;
				uni.scanCode({
					success(data) {
						that.$API.liquefiedGasCodeCheck({
							qrCode: data.result,
							checkType:1
						}).then(res => {
							console.log(res)
							if (res.code == 0) { 
								let _d = that.list.includes(res.data.qrCode); // 返回true
								
								if(!_d){
									if(that.list.length<that.bottleCount){
										that.list.push(res.data.qrCode);
									}else{
										toast(`扫码数不能多于已购气瓶数`)
									}
									
								}
								
								
							}
						}).catch(() => {
						
						});
					}
				})
			},
			qure(){
				if(this.list.length < this.bottleCount){
					toast(`还有${this.bottleCount-this.list.length}个气瓶未扫码确认`)
					return 
				}
				this.$API.liquefieFlowlogList({
					tenantId: this.tenantId,
					pageSize:5
					
				}).then(res => {
					if (res.code === 0) {
						this.flowList= res.page.list;
						console.log(this.flowList)
						if(this.flowList.length>0){
							this.$refs.nkPicker.open();
						}
						
					}
				}).catch(() => {
				
				});
				
				
				
				
				
			}
		}
	}
</script>
<style>
	

	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.no_data{
		width: 100%;
		text-align: center;
		margin-top: 292rpx;
		image{
			width: 340rpx;
			height: 314rpx;
		}
		view{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			margin-top: 64rpx;
		}
	}
	.scan{
		position: fixed;
		right: 40rpx;
		bottom: 400rpx;
		image{
			
			width: 110rpx;
			height: 110rpx;
			
		}
	}
	.content{
		view{
			width: 710rpx;
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin: 20rpx auto  0;
			
			line-height: 98rpx;
			text{
				margin-left: 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
	.btn{
		position: fixed;
		width: 710rpx;
		height: 84rpx;
		background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
		border-radius: 16rpx;
		border: 2rpx solid #E96949;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
